import { useState } from "react";
import { Button } from 'antd';
interface AddTodoProps {
    addTodo: (text: string) => void;
}

/** 添加待办事项 */
export default function AddTodo({ addTodo }: AddTodoProps) {
    const [inputValue, setInputValue] = useState("");

    const handleAddClick = () => {
        if (inputValue.trim()) {
            addTodo(inputValue);
            // 清空输入框
            setInputValue(""); 
        }
    };

    return (
        <div className="w-full flex">
            <input 
                type="text" 
                className="border flex-1 border-gray-300 rounded-md px-2 py-1 mr-2"
                value={inputValue} 
                onInput={(e) => setInputValue((e.target as HTMLInputElement).value)}
                placeholder="输入待办事项" 
            />
            <Button color="primary" variant="solid" onClick={handleAddClick}>添加</Button>
        </div>
    );
}
